<template>
  <div class="variable-stability">
    <a-row v-for="item in chartOption" :key="item.title">
      <div class="chart-wrapper">
        <echart :option="item.option" v-if="item.option" />
        <div v-else class="empty-state">
          <Empty :description="item.emptyText" />
        </div>
      </div>
    </a-row>
  </div>
</template>

<script>
import { Echart } from '@/components'
import { Empty } from 'ant-design-vue'

export default {
  name: 'VariableStability',
  components: {
    Echart,
    Empty,
  },
  props: {
    alertConfigField: {
      type: Array,
      default: () => [],
    },
    queryParam: {
      type: Object,
      default: () => ({}),
    },
    dataSource: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    alertConfigField: {
      handler(newVal) {
        this.allVariables = newVal
      },
      deep: true,
      immediate: true,
    },
    dataSource: {
      handler(newVal) {
        this.initChart(newVal)
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      allVariables: [],
      chartOption: {},
      loading: false,
    }
  },
  methods: {
    initChart(val) {
      console.log('initChart', val)
      if (val.length === 0) {
        return
      }
      const [first] = val
      const { labels, count } = first
      const seriesData = ['total']
      const renderOption = (option) => {
        if (!option.data) {
          return null
        }
        const { title, data } = option
        const series = seriesData.map((item) => ({
          data: data[item],
          type: 'line',
          name: item,
          smooth: true,
        }))
        return {
          title: {
            text: title,
            padding: [5, 0, 0, 0],
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              let result = params[0].name + '<br/>'
              params.forEach((param) => {
                result += param.marker + ' ' + param.seriesName + ': ' + param.value + '<br/>'
              })
              return result
            },
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
              },
            },
          },
          grid: {
            left: '0%',
            right: '0%',
            top: '40px',
            bottom: '40px',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: labels,
            axisLabel: {
              rotate: 45,
              fontSize: 12,
            },
          },
          yAxis: {
            type: 'value',
            name: '数据',
          },
          legend: {
            data: seriesData,
          },
          series,
        }
      }
      this.chartOption = [
        {
          title: '模型调用量',
          data: count,
          emptyText: '模型调用量暂无数据',
        },
      ].map((item) => {
        return {
          option: renderOption(item),
          emptyText: item.emptyText,
        }
      })
      console.log('this.chartOption', this.chartOption)
    },
  },
}
</script>

<style lang="less" scoped>
.variable-stability {
  .chart-wrapper {
    margin-top: 12px;
    padding: 36px;
    .empty-state {
      padding: 40px 0;
      text-align: center;
      background-color: rgb(251, 251, 251);
      border-radius: 4px;
      border: 1px solid rgb(238, 238, 238);
    }
  }
}
</style>
